<template>
	<scroll-view scroll-y class="cate-ul">
		<view class="cate-li" v-for="(item, index) in cate_list" :key="index" @click="goPage('/pages/cate/cateGoods?id=' + item.id + '&name=' + item.title)">
			<view class="cate-name">
				<view class="cate-name-in">{{ item.title }}</view>
			</view>
			<image class="cate-img" :src="item.adImage || item.images" mode="aspectFill"></image>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			cate_list: []
		};
	},
	created() {
		this.getAllCate();
	},
	methods: {
		getAllCate() {
			this.$u.api.getAllCate().then(({ data }) => {
				this.cate_list = data;
				if (data.length) {
					this.now_cate = data[0];
					this.cata_child = data[0].children || [];
				}
			});
		}
	}
};
</script>

<style lang="scss">
.cate-ul {
	height: calc(100vh - 100rpx);
	background-color: #ffffff;
	.cate-li {
		background-color: #f5f5f5;
		margin: 30upx auto 0;
		width: 680upx;
		position: relative;
		.cate-img {
			display: block;
			width: 100%;
			height: 300upx;
			border-radius: 10upx;
		}
		.cate-name {
			position: absolute;
			bottom: 24upx;
			width: 400upx;
			left: 50%;
			transform: translateX(-200upx);
			text-align: center;
			z-index: 1;
			font-size: 28upx;
			font-weight: 600;
			height: 88upx;

			border: 2upx solid #fff;
			.cate-name-in {
				width: calc(100% - 8upx);
				height: calc(100% - 8upx);
				line-height: 80upx;
				margin: 4upx auto;
				background-color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}
</style>
